Estoy tratando de hacer un estado activo en mi enlace cuando se hace clic, que permanece hasta que se hace clic en otro enlace. Me gustaría que la clase se elimine y se transfiera al siguiente enlace cuando se haga clic.
Actualmente se puede activar y desactivar en cada enlace.
// navbar toggle for active state document.getElementById('navbar__list').addEventListener("click", function(event){ event.target.classList.toggle('funcElemStyle'); }); .funcElemStyle { background: #333; }En lugar de usar javascript para lograr esta funcionalidad, puede usar CSS para lograr el mismo efecto usando :active .
por ejemplo:
/* Selects the link element. */ a:active { color: #4444AA; } también puede usar :hover si desea efectos cuando se desplaza. CSS también permite el encadenamiento, por lo que si desea que se aplique un efecto cuando se desplaza sobre él y está activo, puede usar :active:hover
En lugar de alternar, use .add() y . remove() funciones. Ejecute snippet para ver un ejemplo.
document.querySelector("div").addEventListener("click", event=>{ event.target.classList.remove("red") }) div{ width: 100px; height: 100px; background: green; } .red{ background: red; } <div class="red"></div>